<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>个人中心</title>
	<style>
		body{
			background-color:#666666;/*#CC9966;*/
			padding: 0;
		}
		div{
			/*border:1px red solid;*/
			margin:0;
		}
		*{
		margin: 0px;
		padding: 0px;
	}


		#nav {
			display:block;
			white-space:nowrap;
			width:1300px;/*500px;*/
			height: 70px;	
		}

		#nav li {
			width:80px;
			height:70px;
			margin:20px;
			display:inline-block;
		}

		#nav li a {
			font-size: 20px;
			color: white;/*#313131*/
			text-decoration: none;
		}
		#nav li p {
			padding-top: 10px;
			font-size: 20px;
			color: white;
			
		}
		.lir{
			float: right;	
		}



		.topdiv{
		height: 70px;

		background-color:black;/*#666666*/
		}
		.bottomdiv{
			

		}
		.bottomdiv .left{
			 display:inline-block;
			 width:20%;height: 500px;
			 position:absolute;
			 left: 0px;
			 padding-top: 100px;
			 background-color:#787878;

		}
		.bottomdiv .right{
			  display:inline-block;
			  width:80%;height: 600px;
			  background-color:#999999;
			  position:absolute;
			  right:0px;
			  /*overflow:auto;*/

		}



		.menu_item{
			height: 50px;
			width:200px;
			background-color:#787878;
			margin:5px;
		}
		.menu_item a,a:link{
			font-size: 24px;
			text-decoration: none;
			color:black;
			/*background-color:#FFF;*/
			position: relative;
			margin-left: 30%;
			top: 10px;
			/*background-color:#999999;*/
			border-radius: 5px;

		}
		.menu_item a:hover{
			color: white;
			left:  20px;
		}
		.logo{
			align:center;
			margin-left: 15%;
		}
	</style>
	<script type="text/javascript">
		
		function finishOrder(element){

			// alert(element.id)
			var xhr = new XMLHttpRequest()
			xhr.onreadystatechange = function(e){

				if (xhr.readyState==4) {
					if (xhr.status==200) {

						// alert(xhr.responseText)
						if (xhr.responseText=='OK') {
							alert('订单完成！')
							
							window.location.reload()
						}
					}
				}
			}
			xhr.open('post','finishOrder',true)
			xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
			xhr.send("lessonid="+element.id)

		}
	</script>
</head>
<body>
	<!-- 第一行，首部 -->
	<div class="topdiv">
			<div id="nav" class="divinline">
				<ul>
					<li><a href="index.html">主&nbsp;页</a></li>
					<li><a href="order.html">课程中心</a></li>
					<li><a href="myinfo.html">个人中心</a></li>
					<li class="lir"><a href="logout">退出登录</a></li>
					<li class="lir"><p>{{user.nickname}}</p></li>
					<li class="lir" id="src"><img src="/media/{{user.src}}" style="width: 50px;height: 50px;border-radius: 25px"></li>
				</ul>				
			</div>
	</div> 
	<!-- 第二行，body -->
	<div class="bottomdiv">
		<div class="left">
			<div class="menu_item"><a href="mydata">我的资料</a></div>
			<div class="menu_item"><a href="mylesson">我的课程</a></div>
			<!-- 如果是老师，则显示老师所接收的课程列表，如果是学生，则显示学生预约的所有课程 -->
		</div>
		<div class="right" >
			{%block menu_body%}
			{% endblock %}
			<!-- {%block mylesson%}
			{% endblock %} -->
		</div>
	</div>
</body>
</html>